<template>
	<view class="icon-wrapper  flexRow">
		<view v-for="(item,index) in iconList" :key="index" class="icon-item" @click="copyClass(item)">
			<label :class="['iconfont',item]"  :style="{color:iconColor}"></label>
			<view class="icon-text font24">{{item}}</view>
		</view>
		<!-- 彩色图标不适合采用这种方式 -->
		<!-- <view v-for="(item,index) in iconColorList" :key="index" class="icon-item">
			<label :class="['iconfont',item]"></label>
			<view class="icon-text font24">{{item}}</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 iconColor:'#2b9939',
				// iconColor:'',
				iconList: [
					"icon-close","icon-search","icon-refresh",
					"icon-delete","icon-pass","icon-open-eye",
					"icon-uncollect","icon-record","icon-tel",
					"icon-share","icon-dislike","icon-unlock",
					"icon-upload","icon-time","icon-lock",
					"icon-turn-off","icon-settings","icon-user-add"
					],
				iconColorList:["icon-print","icon-nosingle","icon-not-found"]
			}
		},
		methods: {
			//直接拷贝class名称
			copyClass(item) {
				// uni.setClipboardData({
				//     data: item,
				//     success: function () {
				//         console.log('success');
				//     }
				// });
			}
		},
	}
</script>

<style lang="scss">
.icon-wrapper{
	padding: 20rpx;
	.icon-item{
		width: 25%;
		text-align: center;
		margin-bottom: 20rpx;
	}
	.iconfont{
		font-size: 80rpx;
	}
}
</style>